<template>
  <div class="error-page">
    <h1>{{ t('error.404.title') }}</h1>
    <p>{{ t('error.404.description') }}</p>
    <router-link to="/">{{ t('error.404.backHome') }}</router-link>
  </div>
</template>

<script setup lang="ts">
import { t } from '@/i18n';
</script>

<style scoped>
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80vh;
  /* Adjust as needed */
}

h1 {
  font-size: 3em;
  color: #ffc107;
}

p {
  font-size: 1.2em;
  margin-bottom: 20px;
}
</style>
